<template>
  <div class="login-panel">
    <!-- 头像区域 -->
    <div class="avatar">
      <img class="image" :src="imgUrl" />
    </div>    
    <div class="login-form">
      <!-- 登陆表单 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="loginForm.username" prefix-icon="User"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" prefix-icon="Lock" show-password/>
        </el-form-item>
      </el-form>
      <!-- 操作按钮 -->
        <div class="operation">
          <el-button type="primary" @click="handleLoginClick">登陆</el-button>
          <el-button type="info" @click="handleResetClick">重置</el-button>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router'
import getSomeImage from "../../../utils/getSomeImage";
import { login } from "../../../service/api_login"
// import { perHomeRoute, editArticleRoute } from "../../../permission-pages/router"
import regiserRoute from "../../../global-register/regiserRoute"
// 页面数据
const imgUrl = ref("");
const router = useRouter()
const loginFormRef = ref(null)
const loginForm = reactive({
  username: "",
  password: ""
})
const loginRules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ]
})
// 事件处理
const handleResetClick = () => {
  loginFormRef.value.resetFields()
}
const handleLoginClick = async () => {
  // 验证表单
  try {
    await loginFormRef.value.validate()
  } catch (error) {
    return ElMessage.warning("输入不符合要求")
  }
  // 登陆
  const { username, password } = loginForm
  try {
    const { data } = await login({ username, password })
    const { token } = data
    localStorage.setItem('token', token)
    ElMessage.success("登陆成功")
    regiserRoute(router)
    router.replace({ path: '/perhome' })
  } catch (error) {
    return ElMessage.error("用户名或密码错误")
  }
}
// 网络请求
getSomeImage().then((res) => {
  imgUrl.value = res[0];
});
</script>

<style scoped>
.login-panel {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-image: linear-gradient(
    135deg,
    rgba(255, 0, 0, .36),
    rgba(255, 166, 0, .36),
    rgba(0, 0, 255, .36),
    rgba(0, 128, 0, .36),
    rgba(0, 255, 255, .36),
    rgba(76, 0, 130, .36),
    rgba(128, 0, 128, .36)
  );
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 0 10px #666;
  user-select: none;
}

.avatar {
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 10px #666;
}

.avatar .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.login-form {
  position: absolute;
  left: 60px;
  right: 60px;
  margin-top: 32%;
}

.login-form .operation {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.login-form .operation .el-button {
  margin: 0 20px;
  box-shadow: 0 0 5px #666;
}
</style>
